<template>

  <a-comment>


    <a-avatar
        style="border-radius: 0"
        slot="avatar"
        src="/user.svg"
        alt="图片不见了"
    />
    <div slot="content">
      <a-form-item>
        <a-form-model layout="inline" :model="info" @submit.native.prevent :rules="rules" ref="info">
          <a-form-model-item prop="name" required has-feedback>
            <a-input placeholder="名称(必填)" v-model="info.name">
              <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)"/>
            </a-input>
          </a-form-model-item>
          <a-form-model-item prop="homePage" has-feedback>
            <a-input type="text" placeholder="个人主页" v-model="info.homePage">
              <a-icon slot="prefix" type="home" style="color:rgba(0,0,0,.25)"/>
            </a-input>
          </a-form-model-item>
          <a-form-model-item prop="email" has-feedback>
            <a-input type="text" placeholder="邮箱" v-model="info.email">
              <a-icon slot="prefix" type="mail" style="color:rgba(0,0,0,.25)"/>
            </a-input>
          </a-form-model-item>
        </a-form-model>
        <a-form-model-item prop="value" has-feedback>
          <a-textarea :rows="4" :value="value" @change="handleChange" placeholder="请输入内容(必填)"/>
        </a-form-model-item>
        <a-button html-type="submit" type="primary" @click="handleSubmit" :disabled="disabled" :loading="disabled">
          发表评论
        </a-button>
      </a-form-item>
    </div>

    <Verify
        @success="success"
        mode="pop"
        :captchaType="captchaType"
        :imgSize="{ width: '330px', height: '155px' }"
        ref="verify"
    ></Verify>



  </a-comment>

</template>
<script>
import {blogCommentAdd} from "@/api";
import {FormModel} from 'ant-design-vue';
import Vue from "vue";

import Verify from "@/components/verifition/Verify";

Vue.use(FormModel);
// import VueEmoji from 'emoji-vue'

export default {
  components: {
    Verify
  },
  data() {
    let validateName = (rule, value, callback) => {
      if (value === '' ) {
        callback(new Error('名称不能为空且不能大于10个字符！'));
      } else {
        callback();
      }
    };
    let validateHomePage = (rule, value, callback) => {
      if (value === '') {
        callback();
      } else {
        callback();
      }
    };
    let validateEmail = (rule, value, callback) => {
      if (value === '') {
        callback();
      } else {
        callback();
      }
    };
    return {
      comments: [],
      submitting: false,
      disabled: false,
      captchaType:'blockPuzzle',
      info: {
        name: '',
        homePage: '',
        email: ''
      },
      value: '',
      rules: {
        name: [{validator: validateName, trigger: 'change'}],
        homePage: [{trigger: 'change', type: 'url', message: '请输入合法的地址！'}],
        email: [{trigger: 'change', type: 'email', message: '请输入合法的邮箱！'}],
      }
    }
  },
  props: [
    'content',
    'commentator',
    'pageNo',
    'pageSize'
  ],
  mounted() {
    if (this.commentator) {
      this.value = '@' + this.commentator + ' : '
    }
    if (this.content.commentator) {
      this.value = '@' + this.content.commentator + ' : '
    }
  },

  methods: {
    handleSubmit() {


      const that = this
      if (that.value === "") {
        that.$message.warning('请输入留言内容！')
        return
      }
      this.$refs.info.validate(valid => {
        if (valid) {
          this.$refs.verify.show()
        } else {
          console.log('error submit!!');
          return false;
        }
      });


    },
    handleChange(e) {
      this.value = e.target.value
    },
    success(params) {
      // params 返回的二次验证参数, 和登录参数一起回传给登录接口，方便后台进行二次验证
      const that = this
      this.disabled = true
      blogCommentAdd({
        parentId: this.content.parentId,
        blogId: this.content.blogId,
        commentator: this.info.name ? this.info.name : '访客',
        websiteUrl: this.info.homePage ? this.info.homePage : null,
        email: this.info.email,
        commentBody: this.value,
        code:params.captchaVerification
      }).then((res) => {
        if (res.code === 200 && res.success) {
          that.$message.success('发表成功！2秒后刷新')
          setTimeout(function () {
            that.$emit('parentFun')
            that.disabled = false
            that.value = ''
          }, 2000)
        } else {
          that.$emit('parentFun')
          that.disabled = false
          that.value = ''
          that.$message.error(res.message)
        }
      })
    },

  }

}

</script>
<style>
.ant-message {
  z-index: 99999;
}
.ant-comment-avatar img{
  border-radius: 0;
}
</style>